import{d as t,M as n,A as c,h as r}from"./Anchors-CRD96j4l.js";import{D as m,a as i}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const u={path:"/nav/menu",name:"menu",title:"Menu 导航菜单"};function d(l){const e={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...l.components};return n(r,{children:[n("div",{class:"sys-ctx-main-left",children:[n(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),u.title]}),n(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(m,{}),t(i,{id:"base",title:"横向菜单",src:"1base.demo.tsx",code:`import { Icon, Menu, MenuGroup, MenuItem, SubMenu } from "cui-solid"

export default () => {
    return <Menu dir="h">
        <SubMenu name="1" icon={<Icon name="users"/>} title="角色管理">
            <SubMenu name="11" title="添加" align="rightTop">
                <MenuItem name="111">添加超管</MenuItem>
                <MenuItem name="112">添加职员</MenuItem>
            </SubMenu>
            <MenuItem name="12">修改</MenuItem>
            <MenuItem name="13">删除</MenuItem>
        </SubMenu>
        <MenuItem name="2" icon={<Icon name="user"/>}>用户管理</MenuItem>
        <MenuItem name="31" icon={<Icon name="list"/>}>菜单管理</MenuItem>
        <MenuItem name="33" icon={<Icon name="tool"/>}>权限管理</MenuItem>
        <SubMenu name="32" title="字典管理" icon={<Icon name="cog"/>}>
            <MenuGroup name="321" title="系统字典">
                <MenuItem name="3211">添加</MenuItem>
                <MenuItem name="3212">修改</MenuItem>
                <MenuItem name="3213">删除</MenuItem>
            </MenuGroup>
            <MenuGroup name="322" title="客户字典">
                <MenuItem name="3221">添加</MenuItem>
                <MenuItem name="3222">修改</MenuItem>
                <MenuItem name="3223">删除</MenuItem>
            </MenuGroup>
        </SubMenu>
    </Menu>
}`,scopes:void 0,children:n(e.p,{children:["菜单项包含 ",t(e.code,{className:"sp-inline-code",children:"MenuItem"}),"、",t(e.code,{className:"sp-inline-code",children:"SubMenu"}),"、",t(e.code,{className:"sp-inline-code",children:"MenuGroup"}),t(e.br,{}),`
`,"横向菜单需指定 ",t(e.code,{className:"sp-inline-code",children:"dir"})," 为 ",t(e.code,{className:"sp-inline-code",children:"h"}),t(e.br,{}),`
`,"横向菜单的子菜单触发条件为 ",t(e.code,{className:"sp-inline-code",children:"hover"})]})}),t(i,{id:"vertical",title:"侧边菜单",src:"2vertical.demo.tsx",code:`import { Button, Icon, Menu, MenuGroup, MenuItem, SubMenu } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const [activeName, setActiveName] = createSignal('2');

    return <div style={{width: '220px', 'border-right': '1px solid var(--cui-color-border)'}}>
        <Menu dir="v" activeName={[activeName, setActiveName]}>
            <SubMenu name="1" icon={<Icon name="users"/>} title="角色管理">
                <MenuItem name="11">添加</MenuItem>
                <MenuItem name="12">修改</MenuItem>
                <MenuItem name="13">删除</MenuItem>
            </SubMenu>
            <MenuItem name="2" icon={<Icon name="user"/>}>用户管理</MenuItem>
            <SubMenu name="3" icon={<Icon name="cog"/>} title="系统管理">
                <MenuItem name="31">菜单管理</MenuItem>
                <SubMenu name="32" title="字典管理">
                    <MenuGroup name="321" title="系统字典">
                        <MenuItem name="3211">添加</MenuItem>
                        <MenuItem name="3212">修改</MenuItem>
                        <MenuItem name="3213">删除</MenuItem>
                    </MenuGroup>
                    <MenuGroup name="322" title="客户字典">
                        <MenuItem name="3221">添加</MenuItem>
                        <MenuItem name="3222">修改</MenuItem>
                        <MenuItem name="3223">删除</MenuItem>
                    </MenuGroup>
                </SubMenu>
                <MenuItem name="33">权限管理</MenuItem>
            </SubMenu>
        </Menu>
        <Button onClick={() => {
            setActiveName('3212');
        }}>选中指定菜单</Button>
    </div>
}`,scopes:void 0,children:n(e.p,{children:["侧边菜单需指定 ",t(e.code,{className:"sp-inline-code",children:"dir"})," 为 ",t(e.code,{className:"sp-inline-code",children:"v"}),t(e.br,{}),`
`,"默认选中的菜单可指定 ",t(e.code,{className:"sp-inline-code",children:"activeName"}),"，如果选中的菜单项为子菜单，默认展开父菜单项,",t(e.br,{}),`
`,t(e.code,{className:"sp-inline-code",children:"activeName"}),"属性为绑定可控属性"]})}),t(i,{id:"accordion",title:"手风琴方式",src:"3accordion.demo.tsx",code:`import { Icon, Menu, MenuGroup, MenuItem, SubMenu } from "cui-solid"

export default () => {
    return <div style={{width: '220px', 'border-right': '1px solid var(--cui-color-border)'}}>
        <Menu dir="v" accordion>
            <SubMenu name="1" icon={<Icon name="users"/>} title="角色管理">
                <MenuItem name="11">添加</MenuItem>
                <MenuItem name="12">修改</MenuItem>
                <MenuItem name="13">删除</MenuItem>
            </SubMenu>
            <MenuItem name="2" icon={<Icon name="user"/>}>用户管理</MenuItem>
            <SubMenu name="3" icon={<Icon name="cog"/>} title="系统管理">
                <MenuItem name="31">菜单管理</MenuItem>
                <SubMenu name="32" title="字典管理">
                    <MenuGroup name="321" title="系统字典">
                        <MenuItem name="3211">添加</MenuItem>
                        <MenuItem name="3212">修改</MenuItem>
                        <MenuItem name="3213">删除</MenuItem>
                    </MenuGroup>
                    <MenuGroup name="322" title="客户字典">
                        <MenuItem name="3221">添加</MenuItem>
                        <MenuItem name="3222">修改</MenuItem>
                        <MenuItem name="3223">删除</MenuItem>
                    </MenuGroup>
                </SubMenu>
                <MenuItem name="33">权限管理</MenuItem>
            </SubMenu>
        </Menu>
    </div>
}`,scopes:void 0,children:n(e.p,{children:["侧边菜单指定 ",t(e.code,{className:"sp-inline-code",children:"accordion"})," 属性，可以让菜单的打开方式支持手风琴方式"]})}),t(i,{id:"theme",title:"菜单主题",src:"4theme.demo.tsx",code:`import { Icon, Menu, MenuGroup, MenuItem, Space, SubMenu } from "cui-solid"

export default () => {
    return <Space dir="v">
        <Menu dir="h" theme="dark">
            <SubMenu name="1" icon={<Icon name="users"/>} title="角色管理">
                <SubMenu name="11" title="添加" align="rightTop">
                    <MenuItem name="111">添加超管</MenuItem>
                    <MenuItem name="112">添加职员</MenuItem>
                </SubMenu>
                <MenuItem name="12">修改</MenuItem>
                <MenuItem name="13">删除</MenuItem>
            </SubMenu>
            <MenuItem name="2" icon={<Icon name="user"/>}>用户管理</MenuItem>
            <MenuItem name="31" icon={<Icon name="list"/>}>菜单管理</MenuItem>
            <MenuItem name="33" icon={<Icon name="tool"/>}>权限管理</MenuItem>
            <SubMenu name="32" title="字典管理" icon={<Icon name="cog"/>}>
                <MenuGroup name="321" title="系统字典">
                    <MenuItem name="3211">添加</MenuItem>
                    <MenuItem name="3212">修改</MenuItem>
                    <MenuItem name="3213">删除</MenuItem>
                </MenuGroup>
                <MenuGroup name="322" title="客户字典">
                    <MenuItem name="3221">添加</MenuItem>
                    <MenuItem name="3222">修改</MenuItem>
                    <MenuItem name="3223">删除</MenuItem>
                </MenuGroup>
            </SubMenu>
        </Menu>

        <div style={{width: '220px', 'border-right': '1px solid #ccc'}}>
            <Menu dir="v" theme="dark">
                <SubMenu name="1" icon={<Icon name="users"/>} title="角色管理">
                    <MenuItem name="11">添加</MenuItem>
                    <MenuItem name="12">修改</MenuItem>
                    <MenuItem name="13">删除</MenuItem>
                </SubMenu>
                <MenuItem name="2" icon={<Icon name="user"/>}>用户管理</MenuItem>
                <SubMenu name="3" icon={<Icon name="cog"/>} title="系统管理">
                    <MenuItem name="31">菜单管理</MenuItem>
                    <SubMenu name="32" title="字典管理">
                        <MenuGroup name="321" title="系统字典">
                            <MenuItem name="3211">添加</MenuItem>
                            <MenuItem name="3212">修改</MenuItem>
                            <MenuItem name="3213">删除</MenuItem>
                        </MenuGroup>
                        <MenuGroup name="322" title="客户字典">
                            <MenuItem name="3221">添加</MenuItem>
                            <MenuItem name="3222">修改</MenuItem>
                            <MenuItem name="3223">删除</MenuItem>
                        </MenuGroup>
                    </SubMenu>
                    <MenuItem name="33">权限管理</MenuItem>
                </SubMenu>
            </Menu>
        </div>
    </Space>
}`,scopes:void 0,children:n(e.p,{children:["菜单主题通过 ",t(e.code,{className:"sp-inline-code",children:"theme"})," 属性设置 支持 ",t(e.code,{className:"sp-inline-code",children:"light"}),"、",t(e.code,{className:"sp-inline-code",children:"dark"})]})}),t(i,{id:"min",title:"最小化菜单",src:"5min.demo.tsx",code:`import { Button, Icon, Menu, MenuGroup, MenuItem, SubMenu } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const [min, setMin] = createSignal(true);

    return <div style={{width: min() ? '80px' : '280px', 'transition': 'all 0.25s ease-in-out', 'border-right': '1px solid var(--cui-color-border)'}}>
        <Menu dir="v" accordion min={min()}>
            <SubMenu name="1" icon={<Icon name="users"/>} title="角色管理">
                <MenuItem name="11">添加</MenuItem>
                <MenuItem name="12">修改</MenuItem>
                <MenuItem name="13">删除</MenuItem>
            </SubMenu>
            <MenuItem name="2" icon={<Icon name="user"/>}>用户管理</MenuItem>
            <MenuItem name="31" icon={<Icon name="list"/>}>菜单管理</MenuItem>
            <MenuItem name="33" icon={<Icon name="tool"/>}>权限管理</MenuItem>
            <SubMenu name="32" title="字典管理" icon={<Icon name="cog"/>}>
                <MenuGroup name="321" title="系统字典">
                    <MenuItem name="3211">添加</MenuItem>
                    <MenuItem name="3212">修改</MenuItem>
                    <MenuItem name="3213">删除</MenuItem>
                </MenuGroup>
                <MenuGroup name="322" title="客户字典">
                    <MenuItem name="3221">添加</MenuItem>
                    <MenuItem name="3222">修改</MenuItem>
                    <MenuItem name="3223">删除</MenuItem>
                </MenuGroup>
            </SubMenu>
        </Menu>
        <Button onClick={() => {
            setMin(!min());
        }}>展开/收缩</Button>
    </div>
}`,scopes:void 0,children:t(e.p,{children:"菜单最小化的顶级菜单需添加图标，最小化后只显示图标，最小化的 min 参数为可控绑定属性"})}),n(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"Menu属性 "]}),n(e.table,{className:"sp-table",children:[t(e.thead,{children:n(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),n(e.tbody,{children:[n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"accordion"}),t(e.td,{style:{textAlign:"left"},children:"展开方式使用手风琴方式"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"},children:"false"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"theme"}),t(e.td,{style:{textAlign:"left"},children:"主题色"}),t(e.td,{style:{textAlign:"left"},children:"dark | light"}),t(e.td,{style:{textAlign:"left"},children:"light"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"dir"}),t(e.td,{style:{textAlign:"left"},children:"横向菜单或侧边菜单"}),t(e.td,{style:{textAlign:"left"},children:"v | h"}),t(e.td,{style:{textAlign:"left"},children:"v"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"min"}),t(e.td,{style:{textAlign:"left"},children:"最小化菜单"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"},children:"false"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"activeName"}),t(e.td,{style:{textAlign:"left"},children:"默认选中菜单项，绑定属性"}),t(e.td,{style:{textAlign:"left"},children:"Signal"}),t(e.td,{style:{textAlign:"left"}})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onSelect"}),t(e.td,{style:{textAlign:"left"},children:"选择菜单项选中事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),n(e.h2,{id:"menu_item_props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#menu_item_props",children:t(e.span,{className:"icon icon-link"})}),"MenuItem属性 "]}),n(e.table,{className:"sp-table",children:[t(e.thead,{children:n(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),n(e.tbody,{children:[n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"name"}),t(e.td,{style:{textAlign:"left"},children:"菜单项名称"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"disabled"}),t(e.td,{style:{textAlign:"left"},children:"禁用状态"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"icon"}),t(e.td,{style:{textAlign:"left"},children:"图标"}),t(e.td,{style:{textAlign:"left"},children:"Icon"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"data"}),t(e.td,{style:{textAlign:"left"},children:"自定义的数据,在选中的时候携带"}),t(e.td,{style:{textAlign:"left"},children:"any"}),t(e.td,{style:{textAlign:"left"},children:"-"})]})]})]}),n(e.h2,{id:"submenu_props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#submenu_props",children:t(e.span,{className:"icon icon-link"})}),"SubMenu属性 "]}),n(e.table,{className:"sp-table",children:[t(e.thead,{children:n(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),n(e.tbody,{children:[n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"name"}),t(e.td,{style:{textAlign:"left"},children:"菜单项名称"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"align"}),t(e.td,{style:{textAlign:"left"},children:"子菜单显示位置"}),t(e.td,{style:{textAlign:"left"},children:"bottom  |  right  |  bottomLeft  |  bottomRight  |  rightTop  |  left  |  leftTop"}),t(e.td,{style:{textAlign:"left"},children:"横向菜单bottom，侧边菜单rightTop"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"icon"}),t(e.td,{style:{textAlign:"left"},children:"图标"}),t(e.td,{style:{textAlign:"left"},children:"Icon"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"title"}),t(e.td,{style:{textAlign:"left"},children:"菜单文案"}),t(e.td,{style:{textAlign:"left"},children:"any"}),t(e.td,{style:{textAlign:"left"},children:"-"})]})]})]}),n(e.h2,{id:"menu_group_props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#menu_group_props",children:t(e.span,{className:"icon icon-link"})}),"MenuGroup属性 "]}),n(e.table,{className:"sp-table",children:[t(e.thead,{children:n(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),n(e.tbody,{children:[n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"name"}),t(e.td,{style:{textAlign:"left"},children:"菜单项名称"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"icon"}),t(e.td,{style:{textAlign:"left"},children:"图标"}),t(e.td,{style:{textAlign:"left"},children:"Icon"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"title"}),t(e.td,{style:{textAlign:"left"},children:"菜单文案"}),t(e.td,{style:{textAlign:"left"},children:"any"}),t(e.td,{style:{textAlign:"left"},children:"-"})]})]})]}),n(e.h2,{id:"events",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#events",children:t(e.span,{className:"icon icon-link"})}),"事件 "]}),n(e.table,{className:"sp-table",children:[t(e.thead,{children:n(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"事件名称"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"返回值"})]})}),t(e.tbody,{children:n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onSelect"})}),t(e.td,{style:{textAlign:"left"},children:"选择菜单项选中事件"}),t(e.td,{style:{textAlign:"left"},children:"name, data"})]})})]})]}),`
`,`
`,`
`,t(c,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"横向菜单",src:"1base.demo.tsx"},{id:"vertical",title:"侧边菜单",src:"2vertical.demo.tsx"},{id:"accordion",title:"手风琴方式",src:"3accordion.demo.tsx"},{id:"theme",title:"菜单主题",src:"4theme.demo.tsx"},{id:"min",title:"最小化菜单",src:"5min.demo.tsx"},{id:"props",depth:2,title:"Menu属性"},{id:"menu_item_props",depth:2,title:"MenuItem属性"},{id:"submenu_props",depth:2,title:"SubMenu属性"},{id:"menu_group_props",depth:2,title:"MenuGroup属性"},{id:"events",depth:2,title:"事件"}]})]})}function h(l={}){const{wrapper:e}=l.components||{};return e?t(e,{...l,children:t(d,{...l})}):d(l)}export{h as default,u as frontmatter};
